<template>
    <div class="home">
      <!-- 1. 疫情图片 -->
        <img src="../../assets/images/logo.png" width="100%" alt="" />
           <!-- 2. 病毒信息 -->
    <CovInfo :covDesc="covDesc" :news="news" />
        <div class="list">
            <div>
                <router-link to="/area">
                <img src="../../assets/images/1.png" alt="" />
                <div>风险地区</div>
                </router-link>
            </div>
            <div>
                <router-link to="/hesuan">
                <img src="../../assets/images/2.png" alt="" />
                <div>核算检测</div>
                </router-link>
            </div>
            <div>
                <router-link to="/pretion">
                <img src="../../assets/images/3.png" alt="" />
                <div>防疫物资</div>
                </router-link>
            </div>
            <div>
                <img src="../../assets/images/4.png" alt="" />
                <div>出行政策</div>
            </div>
        </div>
           <!-- 4. 数据统计 -->
            <CovNumber :covData="covData" />
            <!-- 5. 中国地图 -->
            <ChinaMap/>
    </div>
</template>

<script>
import CovInfo from "./CovInfo/CovInfo";
import CovNumber from "./CovInfo/CovNumber";
import ChinaMap from "./VueEcharts/ChinaMap";


import api from "../../api/index";
export default {
  name: 'Home',
    components: {
    CovInfo,
    CovNumber,
     ChinaMap
  },
  data() {
        return {
            covDesc:{},
            news: [],
            covData: {}, //全国数据统计
        }
       
    },
    created(){
        api.getCovInfo().then((res) =>{
            console.log(res.data)
            this.news = res.data.newslist[0].news;
            let data = res.data.newslist[0].desc;
            this.covData = {
                currentConfirmedCount: data.currentConfirmedCount,
                confirmedCount: data.confirmedCount,
                suspectedCount: data.suspectedCount,
                curedCount: data.curedCount,
                deadCount: data.deadCount,
                seriousCount: data.seriousCount,
                suspectedIncr: data.suspectedIncr,
                currentConfirmedIncr: data.currentConfirmedIncr,
                confirmedIncr: data.confirmedIncr,
                curedIncr: data.curedIncr,
                deadIncr: data.deadIncr,
                seriousIncr: data.seriousIncr,
                modifyTime: data.modifyTime,
            };

        })
    }

}
</script>
<style lang="scss" scoped>
   .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
  .list {
  display: flex;
  padding-bottom: 0.2rem;
  > div {
    flex: 1;
    text-align: center;
    color: #666;
    img {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
}
</style>
